<template>
  <div class="navlist">
    <ul>
      <li :class="index == actIndex ? 'on': ''" v-for="(item,index) in nav" :key="index" @click='link(index)'>
        <router-link :to="item.path">{{item.text}}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      actIndex:0,
      nav: [
        {
          path: "/board",
          text: "数据展示"
        },
        {
          path: "/order",
          text: "订单管理"
        },
        {
          path: "/car",
          text: "车型管理"
        },
        {
          path: "/price",
          text: "价格管理"
        },
        {
          path: "/merchant",
          text: "商家管理"
        }
      ]
    };
  },
  methods:{
    link(index){
      this.actIndex = index
    }
  },
  created() {
      
  },
  components: {}
};
</script>

<style lang='scss' scoped>
.navlist {
  position: absolute;
  left: 0;
  top: 70px;
  width: 250px;
  background-color: #2b2f3f;
  bottom: 0;
  color: #fff;
  text-align: center;
  padding-top: 20px;
  li {
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    text-align: center;
    &.on {
      background-color: #272a39;
    }
    &:hover {
      background-color: #272a39;
    }
    a {
      color: #fff;
      text-decoration: none;
      width:100%;
      height:100%;
      display:block;
    }
    .router-link-active {
      color: #fff;
      text-decoration: none;
    }
  }
}
</style>
